<template>
  <div class="allencat">
    <el-button class="cheaback" type="text" icon="el-icon-back" @click="hback"
      >返回</el-button
    >

    <el-tabs>
      <h4>身份信息</h4>
      <el-form label-width="100px" ref="formLabelAlign" :model="formLabelAlign">
        <el-form-item label="个人昵称" prop="nick">
          <el-input :disabled="true" v-model="formLabelAlign.nick"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input
            :disabled="true"
            v-model="formLabelAlign.realName"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input :disabled="true" v-model="formLabelAlign.phone"></el-input>
        </el-form-item>
        <el-form-item label="微信号" prop="wxNumber">
          <el-input
            :disabled="true"
            v-model="formLabelAlign.wxNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作类型" >
          <el-input :disabled="true" v-model="this.sg"></el-input>
        </el-form-item>
        <el-form-item label="个人经验" prop="experienceLengthDesc">
          <el-input
            :disabled="true"
            v-model="formLabelAlign.experienceLengthDesc"
          ></el-input>
        </el-form-item>
        <el-form-item label="个人特色" prop="userDesc">
          <el-input
            :disabled="true"
            type="textarea"
            autosize
            v-model="formLabelAlign.userDesc"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="identityNumber">
          <el-input
            :disabled="true"
            v-model="formLabelAlign.identityNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证照片"> </el-form-item>
        <el-image
          prop="identityFrontUrl"
          style="width: 250px; height: 150px"
          :src="formLabelAlign.identityFrontUrl"
          :preview-src-list="srcList"
        >
        </el-image>
        <el-image
          prop="identityBackUrl"
          style="width: 250px; height: 150px"
          :src="formLabelAlign.identityBackUrl"
          :preview-src-list="srcList"
        >
        </el-image>
        <el-form-item class="hbox" prop="status">
          <template v-if="formLabelAlign.status == 'Update' || formLabelAlign.status == 'Submit'">
            <el-button class="defaulte" @click="passeng()" >同意</el-button>
            <el-button class="default"  @click="hsubmiet()"
              >拒绝</el-button
            >
          </template>
          <template v-else>
            <el-button class="defaulte" disabled  @click="passeng()">同意</el-button>
            <el-button class="default" disabled @click="hsubmiet()"
              >拒绝</el-button
            >
          </template>
    
        </el-form-item>
      </el-form>
  
    </el-tabs>
  </div>
</template>

<script>
import { userpass,userdown } from "@/api/user";
import {ossupurl} from '@/api/oss'
import sun from './sun'
export default {
  data() {
    return {
      srcList:[],
      sg:'',
      textarea: "",
    
      form: {
        rejectDesc: "",
      },
      formLabelAlign: {
        identityBackUrl: "",
        identityFrontUrl: "",
        identityNumber: "",
        userDesc: "",
        experienceLengthDesc: "",
        type: "",
        wxNumber: "",
        phone: "",
        realName: "",
        nick: "",
        certificationId:'',
        rejectDesc:''
      },
      q: {
        index: 1,
        size: 15,
      },
    };
  },
  created() {
    this.loachie();
  },
  methods: {
   async loachie() {
      this.formLabelAlign = this.$route.query.row;
      //  console.log(this.formLabelAlign.identityBackUrl);
    this.sg=sun(this.formLabelAlign.type)
    // 解析图片
      const res = await ossupurl({
        'originalUrl':this.formLabelAlign.identityBackUrl
        })
         const ress = await ossupurl({
        'originalUrl':this.formLabelAlign.identityFrontUrl
        })
        this.formLabelAlign.identityBackUrl = res.data
        this.formLabelAlign.identityFrontUrl = ress.data
        this.srcList.push(res.data,ress.data)
    },
    // 返回
    hback() {
      this.$router.back();
    },

    // 同意
    async passeng() {
      const params = new URLSearchParams();
      params.append("certificationId", this.formLabelAlign.certificationId);
      const res = await userpass(params);
           this.loachie();
          this.$router.push('/home/manage/approvals')
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
    },
    // 拒绝
    hsubmiet(){

       this.$prompt("请输入拒绝理由", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          const param = new URLSearchParams();
          param.append("rejectDesc ", this.formLabelAlign.rejectDesc  + value);
          param.append("certificationId", this.formLabelAlign.certificationId);

          const res = await userdown(param);
          this.loachie();
          this.$router.push('/home/manage/approvals')
          if (res.code !== 200) return;
   
          this.$message.success(res.msg);
        })
        .catch(() => {
          this.$message({ type: "info", message: "取消输入" });
        });
    }
  },
};
</script>

<style scoped>
.allencat {
  background-color: #fff;
  height: 200%;
}
.el-textarea,
.el-input {
  width: 300px;
}
.el-form-item__label {
  margin-left: 500px;
  margin-right: 0;
}
.el-form-item {
  transform: translateX(33%);
}
h4 {
  height: 30px;
  line-height: 30px !important;
  text-align: center;
}
.el-image {
  margin-right: 20px;

  transform: translateX(200%);
}
.hbox {
  text-align: center;
  transform: translateX(-5%);
  margin-top: 20px;
}
.ctehon {
  transform: translateX(5%);
}
.el-dialog__title {
  text-align: center !important;
}
.el-input__count {
  transform: translateY(-24px);
}
.el-button--primary {
  background-color: #ff7144;
}

.defaulte {
     background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
  color: #fff;
  margin-bottom: 100px;
}
.defaulte:hover{
    background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
  color: #fff;
}
.el-image-viewer__img {
  max-height: 45%;
}
::v-deep .el-input__inner {
  background-color: #fff !important;
  color: #a8a7af !important;
}
::v-deep .el-textarea__inner {
  background-color: #fff !important;
  color: #a8a7af !important;
}
img {
  width: 100%;
  height: 100%;
}
</style>
